import { App } from 'vue'
import { useIntersectionObserver} from '@vueuse/core'
import defImg from '@/assets/images/200.png'

export default {
  install(app: App) {
    // 图片懒加载
    app.directive('lazy', {
      // el是Dom
      mounted(el, binding) {
        // 设置默认图片
        el.src = defImg
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            stop()
          }
          // 加载失败时s
          el.onerror = () => {
            el.src = defImg
          }
        })
      }
    })
  }
}